<template>
  <div>
    <!-- 轮播图 -->
    <swiper class="brand" indicator-dots="true" autoplay="true" interval="2000">
      <block v-for="(item,index) in swiperList" :key="index">
        <swiper-item class="swiper-item">
          <image mode="scaleToFill" :src="item.url" />
        </swiper-item>
      </block>
    </swiper>
    <!-- 内容 -->
    <div class="content">
      <ul>
        <li @click="goHome">
          <img src="../../assets/images/brand1.png" alt />
          <p>活动</p>
        </li>
        <li>
          <img src="../../assets/images/brand2.png" alt />
          <p>活动</p>
        </li>
        <li>
          <img src="../../assets/images/brand3.png" alt />
          <p>活动</p>
        </li>
        <li>
          <img src="../../assets/images/brand1.png" alt />
          <p>活动</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      swiperList: [
        {
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534136662314&di=af7ec227db5e118a5626a94ab97026f3&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4bed2e738bd4b31ccda81d7a8bd6277f9f2ff85f.jpg"
        },
        {
          url:
            "https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=4b22ec31ddc8a786a12a4c0e5708c9c7/5bafa40f4bfbfbedc5597ab474f0f736aec31ffc.jpg"
        },
        {
          url:
            "https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=87d6daed02f41bd5c553eef461d881a0/f9198618367adab4b025268587d4b31c8601e47b.jpg"
        }
      ]
    };
  },
  computed: {},
  created() {
   
  },
  mounted() {},
  watch: {},
  methods: {
   
    goHome() {
      console.log(1)
      const url = "../logs/main";
      mpvue.navigateTo({ url });
    }
  },
  components: {}
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: black;
}
.brand {
  width: 100%;
}
.swiper-item {
  width: 100%;
}
.swiper-item image {
  width: 100%;
}

.content ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.content ul li {
  /* border: 1px solid red; */
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  margin: 10px;
  background-color: cadetblue;
  height: 160px;
}
.content ul li img {
  width: 100%;
}
.content ul li p {
  color: black;
}
</style>
